<template>
  <div class="charge">
    <el-table :data="vipList" border style="width: 100%">
      <el-table-column prop="imageUrl" label="产品图片" width="100" align="center">
         <template v-slot="{row}">
            <el-avatar shape="square" :size=80 fit="scale-down" :src="row.imageUrl"></el-avatar>
         </template>
      </el-table-column>
      <el-table-column prop="productName" label="产品名称" align="center"></el-table-column>
      <el-table-column prop="description" label="产品描述" align="center"></el-table-column>
      <el-table-column prop="price" label="价格" width="180" align="center"></el-table-column>
      <el-table-column prop="inventory" label="库存" width="180" align="center"></el-table-column>
      <el-table-column prop="operaion" label="操作" width="180" align="center">
         <template v-slot="{row}">
            <el-button type="primary" icon="iconfont icon-chongzhi" @click="pre_order(row)">充值</el-button>
         </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import * as api from "../../../../api";
import {mapMutations} from "vuex";
export default {
   methods:{
      ...mapMutations(["SET_CURRENT_CHARGE_PRODUCT"]),
      pre_order(row){
         //获得当前这一行的产品id product_id
         // console.log(row);
         this.$confirm(`您正在购买${row.productName}, 是否确认?`, '购买提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            // 给row添加一个属性quantity
            row.quantity = 0
            //1.将当前的商品存到vuex中
            this.SET_CURRENT_CHARGE_PRODUCT(row)
            //2.页面跳转到pre_order页面
            this.$router.push({name:"pre_order"})
            //3.展示商品详情
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消购买'
          });          
        });

      }
   },
   data() {
      return {
         vipList:[]
      };
   },
   created(){
      api.getVipListApi("20210827165510715")
      .then(res=>{
         console.log(res);
         if(res.data.state){//获取成功
            this.vipList = res.data.data
         }else{
            this.$message.error("获取失败")
         }
      })
   }
};
</script>
<style scoped lang="less">
.charge{
   padding-top:20px;
}
.el-avatar{
   /deep/ img{
      width:100%;
   }
   background:pink;
   height:30px;
}

</style>
